<body class="container">
    <div class="row">
        <div class="col-12">
            <? echo app\NavComponent::render(); ?>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-8 offset-1">
            <form method="post" action="<? echo $action; ?>" id="form">
                <div class="form-group row">
                    <label for="name" class="col-sm-4 col-form-label text-right">姓名</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="name" value="<? echo $user['name']; ?>" name="name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="username" class="col-sm-4 col-form-label text-right">用户名</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="username" name="username"
                        value="<? echo $user['username']; ?>">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="username" class="col-sm-4 col-form-label text-right">角色</label>
                    <div class="col-sm-8">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" <? if($user['role'] === '0') echo 'checked="checked"'; ?> type="radio" name="role" id="role_admin" value="0">
                            <label class="form-check-label" for="role_admin">管理员</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="role" id="role_user" value="1"
                                <? if($user['role'] === '1') echo 'checked="checked"'; ?>>
                            <label class="form-check-label" for="role_user">用户</label>
                        </div>
                    </div>
                </div>

                 <div class="form-group row">
                    <div class="alert alert-danger col-8 offset-4" style="display: none" role="alert" id="alert">
                     发生了错误！
                    </div>
                 </div>

                <div class="form-group row">
                    <label class="col-sm-4 col-form-label text-right"></label>
                    <div class="col-sm-8">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </div> 
            </form>
        </div>
    </div>
    <script type="text/javascript">
        const form = document.getElementById('form');
        form.addEventListener('submit', function(event) {
            const alert = document.getElementById('alert');

            const name = document.getElementById('name');
            if (name.value === '') {
                alert.style.display = 'block';
                alert.innerText = '请输入姓名';
                event.preventDefault();
                return;
            }

            const username = document.getElementById('username');
            if (username.value === '') {
                alert.style.display = 'block';
                alert.innerText = '请输入用户名';
                event.preventDefault();
                return;
            }

            const role = document.querySelector('input[name="role"]:checked');
            if (role === null) {
                alert.style.display = 'block';
                alert.innerText = '请选择角色';
                event.preventDefault();
            }
        });
    </script>
</body>
</html>